<template>
    <div id="container" v-show="showMap"></div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import AMapLoader from '@amap/amap-jsapi-loader';
import axios from 'axios'
import {toast} from '@/utils/common'
export default {
    props:{
        showMap:{
            type:Boolean,
            default:false
        }
    },
    components:{
        
    },
    setup(props,{emit}){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            map:null,
            findData:''
        })

        onMounted( async()=>{
           state.map = await initMap() 
            //const tt = await getPositionInfo()
           //console.log(tt)   
        })

        const initMap = ()=>{
            return new Promise((resolve,reject) =>{
                AMapLoader.load({
                    key:"fefd89786fce192bde46c0d733aa8492", // 申请好的Web端开发者Key，首次调用 load 时必填
                // version:"2.0",      //不用2.0，会有各种问题， 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    plugins:['AMap.Scale','AMap.CitySearch'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                }).then((AMap)=>{
                     const map= new AMap.Map("container",{  //设置地图容器id
                        viewMode:"3D",    //是否为3D地图模式
                        zoom:11,           //初始化地图级别
                        //center:[116.397428, 39.90923], //初始化地图中心点位置，不指定默认为当前所在的城市
                    });
                    emit('loaded',AMap)
                    resolve(map)
                }).catch(e=>{
                    console.log(e);
                    resolve(false)
                })
            })
            
        }

        // 获取当前位置信息（只获取到城市）
        const getPositionInfo = ()=>{
            return new Promise((resolve,reject)=>{
                if(!state.map) return toast('地图加载出错')
                let info = {
                    cityCode:state.map.getAdcode(),
                    lng:state.map.getCenter().lng, // 经度
                    lat:state.map.getCenter().lat // 纬度
                }
                if(!info.cityCode){
                    resolve({...info,positionInfo:{}})
                    return
                }
                axios.get('/h5/json/area.json').then(res=>{
                    const areaList = res.data
                    state.findData = ''
                    const positionInfo = loopErgodic(areaList,info.cityCode)
                    resolve({...info,positionInfo})
                }) 
            })        
        }
        // 获取2点的距离，根据经纬度
        const getDistance = (p1,p2)=>{
            //var p1 = [116.434027, 39.941037];
            //var p2 = [116.461665, 39.941564];
            if(p1 && p2){
                return AMap.GeometryUtil.distance(p1, p2)
            }else{
               return ''
            }
        }

        // 获取精准定位
        const getAccurateLocation =(onComplete)=>{
            console.log("开始获取精准点位.....")
            AMap.plugin('AMap.Geolocation', function() {
                var geolocation = new AMap.Geolocation({
                    // 是否使用高精度定位，默认：true
                    enableHighAccuracy: true,
                    // 设置定位超时时间，默认：无穷大
                    timeout: 10000,
                    // 定位按钮的停靠位置的偏移量
                    offset: [10, 20],
                    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    zoomToAccuracy: true,     
                    //  定位按钮的排放位置,  RB表示右下
                    position: 'RB'
                })

                geolocation.getCurrentPosition(function(status,result){
                        onComplete(status,result)
                        // if(status=='complete'){
                        //     onComplete(result)
                        // }else{
                        //     onError(result)
                        // }
                });

                // function onComplete (data) {
                //     // data是具体的定位信息
                //     console.log("定位信息：",data)
                // }

                // function onError (data) {
                //     // 定位出错
                //     console.log("定位出错了：",data)
                // }
            })
        }
        
        // 如果不需要获取精确的位置，只需要城市级别的定位信息，推荐使用AMap.CitySearch插件(经测试，该方法获取失败)
        const getCity = ()=>{
            //实例化城市查询类
            var citysearch = new AMap.CitySearch();
            //自动获取用户IP，返回当前城市
            citysearch.getLocalCity(function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    console.log("status-result:",status,result)
                    if (result && result.city && result.bounds) {
                        var cityinfo = result.city;
                        var citybounds = result.bounds;
                        console.log("oooo:",result)
                    }
                } else {
                    console.log("status-result2:",status,result)
                }
            });
        }

        // 循环遍历地址列表，查到code为value是就停止遍历
        const loopErgodic = (arr,value) =>{
            
            for(let a=0;a<arr.length;a++){  // 遍历省
                let positionInfo = {
                    province:'',  // 省
                    city:'', // 市
                    county:'' // 区县
                }
                const item1 = arr[a]
                positionInfo.province = item1
                if(item1.code == value){
                    return positionInfo
                }else if(item1.sub){
                    for(let b=0;b<item1.sub.length;b++){ // 遍历市
                        positionInfo.county = ''
                        const item2 = item1.sub[b]
                        positionInfo.city = item2
                        if(item2.code == value){
                            return positionInfo
                        }else if(item2.sub){
                            for(let c=0;c<item2.sub.length;c++){ // 遍历区县
                                const item3 = item2.sub[c]
                                positionInfo.county = item3
                                if(item3.code == value){
                                    return positionInfo
                                }
                            }
                        }
                    }
                }
            }
        }


        return{
            ...toRefs(state),
            getPositionInfo,
            getDistance,
            getAccurateLocation,
            getCity
        }
    }
}
</script>

<style lang="scss" scoped>
    #container{
        width: 100%;
        height: 800px;
    }
</style>